<template>
	<view>
		<view class="topfixed">
			<view class="search_top">
				<uni-icons type="search" size="24" color="#D1CDCD"></uni-icons>
				<input auto-focus placeholder-class="inputclass" placeholder="搜索/商品/店铺" v-model="inputClearValue"
					confirm-type="search" @confirm='confirminput' @input="changevalue" />
				<uni-icons v-if="showClearIcon" color="#D1CDCD" type="clear" size="24" @click="clearIcon"></uni-icons>
			</view>
		</view>
		<view class="" v-if="params.keyWord == ''">
			<view class="search_ls" v-if="historyList.length!=0">
				<view class="tit">
					搜索历史
					<!-- <uni-icons type="trash" size="20" color="#D1CDCD"></uni-icons> -->
				</view>
				<view class="titflex">
					<view class="itt" 
					v-for="(item,index) in historyList" :key="index" @click="tipclick(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="search_tj">
				<view class="tit">
					<image src="/static/tj.png" mode=""></image>
				</view>
				<view class="titflex">
					<view class="itt" v-for="(item,index) in wholikeList" :key="index"
					@click="pageShop(item)">
						<image src="/static/dp.png" mode=""></image>
						{{item.shopName}}
					</view>
				</view>
			</view>
		</view>
		<view class="shuju" v-if="!nolist && params.keyWord">
			<view class="shop" v-for="(item,index) in shoplist" :key="index">
				<view class="shoptit" @click="pageShop(item)">
					<view class="">{{item.shopName}}</view>
					<view class="x"></view>
					<view class="block_flex">
						<view class="block_l">
							<span class="t1">{{item.rating}}</span>
							<image src="/static/icon/x.png" mode=""></image>
							<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
						</view>
						<view class="block_r">
							<image src="/static/icon/dw.png" mode=""></image>
							<span>{{item.distanceString}}</span>
						</view>
					</view>
				</view>
				<view class="shopflex">
					<view class="price_item" v-for="(its,i) in item.productList.slice(0,islength)" :key="i"
						@click.stop="pageDetail(item.productList[i].id,item.distanceString)">
						<view class="img">
							<image :src="its.img.split(',')[0]" mode="aspectFill"></image>
							<view class="" v-if="its.sellStop != 1 && its.status =='UP'">
								<view class="tip" v-if="its.count <=5">仅剩{{its.count}}份</view>
								<view class="tip" v-else>剩5份+</view>
								<view class="time">
									<image src="/static/icon/z.png" mode=""></image>
									今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
								</view>
							</view>
							<view class="time1" v-if="its.sellStop == 1 || its.status !='UP'">
								<view class="tflex1" v-if="its.status !='UP'">
									<image src="/static/icon/x1.png" mode=""></image>
									<view class="">
										未上架
									</view>
								</view>
								<view class="tflex1" v-else-if="its.sellStop == 1">
									<image src="/static/icon/k.png" mode=""></image>
									<view class="">
										已售罄
									</view>
								</view>
								
								<view class="tflex">
									<image src="/static/icon/z.png" mode=""></image>
									今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
								</view>
							</view>
						</view>
						<view class="flex_r">
							<view class="text">{{its.productName}}</view>
							<view class="DINB">
								<span class="ic">￥</span>{{its.price}}
								<span class="FINE">￥{{its.priceOldBegin}}-{{its.priceOldEnd}}</span>
							</view>
							<view class="tipflex">
								<view class="its" v-for="i in its.category.split(',')" :key="i">{{i}}</view>
							</view>
							<view class="plun">
								<image :src="its.comment.userHead?its.comment.userHead:'/static/toux.png'" mode=""></image>
								<view class="tts">{{its.comment.content?its.comment.content:"暂无评价"}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="check" v-if="item.productList.length > 2" @click.stop="change(item.productList.length)">
					<view class="">
						<span v-if="checkAll">查看更多</span>
						<span v-else>收起</span>
						<uni-icons size='14' color="#979797" :type="checkAll?'down':'top'"></uni-icons>
					</view>
				</view>
			</view>
			<view class="" style="height: 100rpx;"></view>
		</view>
		<view class="kong" v-if="nolist && params.keyWord">
			<view class="k1">
				<image src="/static/sekong.png" mode=""></image>
				<view class="t1">
					暂无商品
				</view>
				<view class="texts">
					<view class="">
						没有找到你搜索的内容
					</view>
					<view class="">
						换个关键词试试~
					</view>
				</view>
			</view>
			<view class="k2">
				<view class="kflexl">
					<image src="/static/icon/wh.png" mode=""></image>
					你可能想知道
				</view>
				<view class="kflexr">
					<view class="">超时未取餐该怎么办？</view>
					<view class="icons" @click="$pageGo('/mypage/contactus/question')">更多帮助
						<uni-icons type="right" color="#29A85C" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="k34">
				<view class="">
					<view class="kflexl">
						<view class="kflexl">
							<image src="/static/icon/ql.png" mode=""></image>
							<view class="">
								福利群
							</view>
						</view>
						<view class="lyh">
							领优惠
						</view>
					</view>
					<view class="test">
						有问题，就找小薅，长按识别即可联系专属客服~
					</view>
				</view>
				<view class="rimg">
					<image show-menu-by-longpress :src="imgInfo.kfCode" mode=""></image>
				</view>
			</view>
			<view class="k4">
				<view class="title">
					猜你喜欢 <span>由近到远，所有商家都在这里啦~</span>
				</view>
				<view class="shuju">
					<view class="shop" v-for="(item,index) in wholikeList" :key="index">
						<view class="shoptit" @click="pageShop(item)">
							<view class="">{{item.shopName}}</view>
							<view class="x"></view>
							<view class="block_flex">
								<view class="block_l">
									<span class="t1">{{item.rating}}</span>
									<image src="/static/icon/x.png" mode=""></image>
									<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
								</view>
								<view class="block_r">
									<image src="/static/icon/dw.png" mode=""></image>
									<span>{{item.distanceString}}</span>
								</view>
							</view>
						</view>
						<view class="shopflex">
							<view class="price_item" v-for="(its,i) in item.productList.slice(0,islength)" :key="i"
								@click.stop="pageDetail(item.productList[i].id,item.distanceString)">
								<view class="img">
									<image :src="its.img.split(',')[0]" mode="aspectFill"></image>
									<view class="" v-if="its.sellStop != 1 && its.status =='UP'">
										<view class="tip" v-if="its.count ==1">仅剩{{its.count}}份</view>
										<view class="tip" v-else>剩5份+</view>
										<view class="time">
											<image src="/static/icon/z.png" mode=""></image>
											今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
										</view>
									</view>
									<view class="time1" v-if="its.sellStop == 1 || its.status !='UP'">
										<view class="tflex1" v-if="its.status !='UP'">
											<image src="/static/icon/x1.png" mode=""></image>
											<view class="">
												未上架
											</view>
										</view>
										<view class="tflex1" v-else-if="its.sellStop == 1">
											<image src="/static/icon/k.png" mode=""></image>
											<view class="">
												已售罄
											</view>
										</view>
										
										<view class="tflex">
											<image src="/static/icon/z.png" mode=""></image>
											今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
										</view>
									</view>
								</view>
								<view class="flex_r">
									<view class="text">{{its.productName}}</view>
									<view class="DINB">
										<span class="ic">￥</span>{{its.price}}
										<span class="FINE">￥{{its.priceOldBegin}}-{{its.priceOldEnd}}</span>
									</view>
									<view class="tipflex">
										<view class="its" v-for="i in its.category.split(',')" :key="i">{{i}}</view>
									</view>
									<view class="plun">
										<image :src="its.comment.userHead?its.comment.userHead:'/static/toux.png'" mode="">
										</image>
										<view class="tts">{{its.comment.content?its.comment.content:"暂无评价"}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="check" v-if="item.productList.length > 2"
							@click.stop="change(item.productList.length)">
							<view class="">
								<span v-if="checkAll">查看更多</span>
								<span v-else>收起</span>
								<uni-icons size='14' color="#979797" :type="checkAll?'down':'top'"></uni-icons>
							</view>
						</view>
					</view>
					<view class="" style="height: 100rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchShop,
		gethotsShop,getimg
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				checkAll: true,
				islength: 2,
				shoplist: [],
				showClearIcon: false,
				inputClearValue: '',
				params: {
					keyWord: "",
					pageNum: 1,
					pageSize: 10
				},
				nolist: false,
				total:0,

				wholikeList: [],
				historyList:[],
				imgInfo:{}
			};
		},
		onLoad() {
			getimg({}).then(res=>{
				this.imgInfo = res.data
			})
			this.getshoplist()
			this.historyList = uni.getStorageSync('historyList')?uni.getStorageSync('historyList'):[]
		},
		onReachBottom() {
			if(this.params.pageNum>1&&this.shoplist.length == this.total){
				uni.showToast({
					title:'已加载全部',
					icon:'none'
				})
			}
			this.params.pageNum ++
			this.params = Object.assign(this.params, uni.getStorageSync('address'))
			searchShop(this.params).then(res => {
				this.shoplist.push(...res.rows)
				this.total = res.total
				let total = Math.ceil(res.total / this.params.pageSize);
				this.nolist = total == 0
				
			})
		},
		methods: {
			//猜你喜欢
			getshoplist() {
				this.params = Object.assign(this.params, uni.getStorageSync('address'))
				gethotsShop(this.params).then(res => {
					this.wholikeList = res.rows.splice(0, 6)
				})
			},
			//跳转店铺
			pageShop(item) {
				uni.navigateTo({
					url: `/mainpage/shopdetail?id=${item.id}`
				})
			},
			//跳转详情
			pageDetail(id, distance) {
				uni.navigateTo({
					url: `/mainpage/details?productid=${id}&&distance=${distance}`
				})
			},
			//查看更多
			change(e) {
				this.checkAll = !this.checkAll
				this.checkAll ? this.islength = 2 : this.islength = e
			},
			search() {
				this.params = Object.assign(this.params, uni.getStorageSync('address'))
				searchShop(this.params).then(res => {
					this.shoplist = res.rows
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
				})
			},
			changevalue(e) {
				if (e.detail.value != '') {
					this.showClearIcon = true;
				} else {
					this.inputClearValue = ''
					this.params.keyWord = ''
					this.showClearIcon = false;
					this.nolist = false
					this.shoplist = []
				}
			},
			clearIcon() {
				this.showClearIcon = false;
				this.nolist = false
				this.inputClearValue = ''
				this.params.keyWord = ''
				this.shoplist = []
			},
			tipclick(item){
				this.params.keyWord = item
				this.inputClearValue = item
				this.showClearIcon = true;
				this.search()
			},
			confirminput(e) {
				this.params.keyWord = e.detail.value
				let index = this.historyList.findIndex(item=>item===e.detail.value)
				//1 判断在不在 在就不添加
				//2 判断长度大于6就删除第一个在增加
				if(index==-1){
					if(this.historyList.length>=6){
						this.historyList.shift()
						this.historyList.push(this.params.keyWord)
					}else{
						this.historyList.push(this.params.keyWord)
					}
				}
				uni.setStorageSync('historyList',this.historyList)
				this.search()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.shuju {
		background-color: #FBFBFB;
	}
	.topfixed {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #FFFFFF;
		height: 160rpx;
		padding: 40rpx;
		box-sizing: border-box;
		z-index: 99;
	}

	.search_top {
		width: 670rpx;
		height: 80rpx;
		background: #FBFBFB;
		border-radius: 118rpx 118rpx 118rpx 118rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 22rpx;
		box-sizing: border-box;

		.inputclass {
			font-weight: 500;
			font-size: 28rpx;
			color: #D1CDCD;
		}

		input {
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding-left: 10rpx;
		}
	}

	.search_ls {
		padding: 0rpx 40rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.titflex {
			display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;
		}

		.itt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			line-height: 50rpx;
			height: 50rpx;
			background: #F6F6F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0rpx 20rpx;
			margin: 10rpx 20rpx 10rpx 0rpx;
		}
	}

	.search_tj {
		padding: 0rpx 40rpx;
		margin-top: 60rpx;
		box-sizing: border-box;

		.tit {
			image {
				width: 112rpx;
				height: 40rpx;
			}
		}

		.titflex {
			display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;
		}

		.itt {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}

			font-family: PingFang SC,
			PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			line-height: 50rpx;
			height: 50rpx;
			background: #F6F6F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0rpx 20rpx;
			margin: 10rpx 20rpx 10rpx 0rpx;
		}
	}

	// scroll-view {
	// 	width: 100%;
	// 	height: calc(100vh - 100px);
	// 	box-sizing: border-box;
	// 	background-color: #FBFBFB;
	// }

	.shop {
		width: 710rpx;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;

		.shoptit {
			display: flex;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			align-items: center;

			.x {
				width: 3rpx;
				height: 35rpx;
				background-color: #000000;
				margin: 0rpx 10rpx;
			}

			.block_flex {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0rpx 6rpx;
				}

				.block_l {
					display: flex;
					align-items: center;

					.t1 {
						font-family: 'DINB';
						font-size: 32rpx;
						color: #000000;
					}

					.t2 {
						font-family: 'FINE';
						font-weight: 400;
						font-size: 24rpx;
						color: #979797;
					}

				}

				.block_r {
					font-family: 'FINE';
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}

		.shopflex {
			margin-top: 20rpx;
		}

		.price_item {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.img {
				width: 300rpx;
				height: 180rpx;
				position: relative;

				image {
					width: 300rpx;
					height: 180rpx;
					border-radius: 15rpx;
				}

				.tip {
					position: absolute;
					top: 14rpx;
					left: 12rpx;
					height: 32rpx;
					background: #29A85C;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 0 10rpx;
					line-height: 32rpx;
				}

				.time {
					position: absolute;
					bottom: 0%;
					width: 100%;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					font-family: PingFang SC,
					PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					border-radius: 0rpx 0rpx 15rpx 15rpx;
				}

				.time1 {
					position: absolute;
					top: 0%;
					width: 100%;
					height: 180rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 15rpx;
					display: flex;
					justify-content: center;

					.tflex {
						width: 100%;
						position: absolute;
						bottom: 6rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC,
							PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
					}

					.tflex1 {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;

						image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 6rpx;
						}
					}

				}
			}

			.flex_r {
				margin-left: 20rpx;
				width: 350rpx;
			}

			.text {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tipflex {
				display: flex;
				align-items: center;

				.its {
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B7B7B;
					line-height: 44rpx;
					padding: 0rpx 16rpx;
					margin: 6rpx 8rpx 0rpx 0rpx;
				}
			}

			.plun {
				display: flex;
				margin-top: 8rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
					border-radius: 15rpx;
				}
				.tts {
					flex: 1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.check {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		line-height: 30rpx;
		margin-bottom: 20rpx;
	}


	.kong {
		margin-top: 30rpx;
		.k1 {
			text-align: center;

			image {
				width: 228rpx;
				height: 228rpx;
			}

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}

			.texts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				margin-top: 10rpx;
			}
		}

		.k2 {
			width: 710rpx;
			height: 140rpx;
			background: #F3F3F3;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 70rpx auto 0rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.kflexl {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
			}

			.kflexr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				margin-top: 10rpx;

				.icons {
					display: flex;
					align-items: center;
					color: #29A85C;
				}
			}

		}

		.k4 {
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;

				span {
					margin-left: 6rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
				}
			}
		}
	}
</style>